'use client'

import LazyImage from '@/components/LazyImage';
import React, { useState } from 'react'

interface TimelineItem {
    label: string;
    img: string;
}

interface TimelineProps {
    timelineData: TimelineItem[];
    className?: string;
}

export default function Timeline({ timelineData, className = "py-16" }: TimelineProps) {
    const [selectedIdx, setSelectedIdx] = useState(0);

    return (
        <div className={className}>
            {/* 时间线容器 */}
            <div className="relative w-full mx-auto h-24">
                {/* 连接线 */}
                <div className="absolute top-1/2 left-0 right-0 h-[1px] bg-[#f7b401] transform -translate-y-1/2"></div>

                {/* 时间节点 */}
                <div className="relative h-full">
                    {timelineData.map((item, index) => (
                        <div
                            key={index}
                            className="absolute cursor-pointer group"
                            style={{
                                left: `${((index + 1) * 100) / (timelineData.length + 1)}%`,
                                transform: 'translateX(-50%)',
                                top: '0',
                                height: '100%'
                            }}
                            onClick={() => setSelectedIdx(index)}
                        >
                            {/* 标签 - 显示在上方 */}
                            <div className="absolute top-0 left-1/2 transform -translate-x-1/2">
                                <div
                                    className={`text-sm font-medium transition-colors duration-300 whitespace-nowrap ${selectedIdx === index
                                        ? 'text-[#f9b200]'
                                        : 'text-gray-700 group-hover:text-orange-500'
                                        }`}
                                >
                                    {item.label}
                                </div>
                            </div>

                            {/* 节点圆点区域 */}
                            <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                                {/* 外层半透明大圆点 */}
                                <div
                                    className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full transition-all duration-300 ${selectedIdx === index
                                            ? 'bg-[#f7b50167] scale-125'
                                            : 'bg-amber-400/20 group-hover:scale-110'
                                        }`}
                                ></div>

                                {/* 内层实心小圆点 */}
                                <div
                                    className={`w-2 h-2 rounded-full border-2 transition-all duration-300 ${selectedIdx === index
                                        ? 'bg-[#f7b401] border-[#f7b401] scale-125'
                                        : 'bg-amber-400 border-amber-400 group-hover:scale-110'
                                        }`}
                                ></div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>

            {/* 选中项目的图片显示 */}
            <div className="w-full mx-auto">
                <div className="relative w-full" style={{
                    paddingLeft: `${100 / (timelineData.length + 1)}%`,
                    paddingRight: `${100 / (timelineData.length + 1)}%`
                }}>
                    <img
                        loading='lazy'
                        src={timelineData[selectedIdx].img}
                        alt={timelineData[selectedIdx].label}
                        className="w-full h-auto object-contain"
                    />
                </div>
            </div>
        </div>
    );
}
